<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Baidu Map</title>
    <link rel="stylesheet" type="text/css" href="/js/arcgisjsapi/4.16/dijit/themes/tundra/tundra.css"/>
    <link rel="stylesheet" type="text/css" href="/js/arcgisjsapi/4.16/esri/css/view.css" />
    <link rel="stylesheet" type="text/css" href="/js/arcgisjsapi/4.16/esri/css/main.css" />
    <style>
        html, body, #map {
            height: 100%;
            margin: 0;
            padding: 0;
        }
        .base-map-ano{
            position: absolute;
            right: 0pt;
            top:18pt;
            background: #e6edf1;
            border: #96aed1 1px solid;
            padding: 4px 5px;
            padding-left: 0px;
            padding-top: 0px;
            display: none;
            font-weight: normal;
        }
        .base-map{
            position: absolute;
            right: 15pt;
            top:15pt;
            background: #f0f0f0;
            border: #96aed1 1px solid;
            width: auto;
            height: auto;
            z-index: 99;
            font:normal 11px "宋体",Arial;
            color:#868686;
        }
        .base-map-switch{
            padding: 4px 8px;
            float: left;
        }
        .base-map-switch-active{
            background:#e6edf1;
            font-weight: bold;
            color: #4d4d4d;
        }
        .base-map-switch:hover{
            cursor: pointer;
        }
        .base-map-switch-center{
            border: 1px #96aed1 solid;
            border-top:none;
            border-bottom:none;
        }
    </style>
    <script type="text/javascript">
      dojoConfig = {
            baseUrl:"localhost:8088/js/arcgisjsapi/4.16/dojo",
            parseOnLoad: true,
          async:true,
            packages: [{
                name: 'arcgis',
                location: "/js/arcgisjsapi/4.16"
            }
            ]
        };
    </script>
    <script type="text/javascript" src="/js/arcgisjsapi/4.16/init.js"></script>
    <script src="/js/arcgisjsapi/4.16/bdlib/jquery-1.8.3.js"></script>

    <script src="/js/arcgisjsapi/4.16/"></script>

    <script src="/js/arcgisjsapi/4.16/dojo/dojo.js"
            data-dojo-config="async:true"></script>

    <script>
        /*
        require(["arcgis/esri/Map", "arcgis/esri/views/MapView"],
            function (Map, MapView) {
                // Create the Map
                var map = new Map({
                    basemap: "topo"
                });

                // Create the view set the view padding to be 320 px from the right
                var view = new MapView({
                    container: "map",
                    map: map,
                    center: [-74.045459, 40.690083], // Liberty Island, NY, USA
                    zoom: 16,
                    padding: {
                        right: 320 // Same value as the #sidebar width in CSS
                    }
                });


            });
            */


    </script>

    <script>

        try {
            var map, showMap, anoCtrl;
            require(["arcgis/esri/map",
                    "arcgis/esri/views/MapView",
                    "arcgis/bdlib/BeiDlayer",
                   "arcgis/bdlib/BDVecLayer",
                    "arcgis/bdlib/BDImgLayer",
                   "arcgis/bdlib/BDAnoLayer",
                   "arcgis/esri/layers/FeatureLayer",
                    "arcgis/esri/geometry/Point",
                  //  "arcgis/esri/SpatialReference",
                    "arcgis/esri/geometry/SpatialReference",

                    "arcgis/esri/Color",
                    "arcgis/esri/views/SceneView",
                    "arcgis/esri/widgets/BasemapLayerList"

                ],
                function (Map,
                          MapView,
                          BeiDlayer,
                          BDVecLayer,
                          BDImgLayer,
                          BDAnoLayer,
                         FeatureLayer,
                          Point,
                         SpatialReference,
                          Color,
                          SceneView,
                          BasemapLayerList

                ) {
                    var vecMap = null;
                try {

                    // BDVecLayer
                    vecMap = new BeiDlayer({
                        //urlTemplate: "https://stamen-tiles.a.ssl.fastly.net/toner/{z}/{x}/{y}.png",
                        //百度瓦片地图
                       urlTemplate:"http://online1.map.bdimg.com/onlinelabel/?qt=tile&x={x}&y={y}&z={z}",
                       //搞得瓦片地图
                       //  urlTemplate:"http://wprd03.is.autonavi.com/appmaptile?style=7&x={x}&y={y}&z={z}",
                        //    tint: new Color("#004FBB"),
                        //谷歌瓦片地图
                       // urlTemplate:"http://mt2.google.cn/vt/lyrs=m@167000000&hl=zh-CN&gl=cn&x={x}&y={y}&z={z}&s=Galil",

                        title: "百度"
                    });
                  //  vecMap.showMsg(3,22);
                }
                catch (e) {
                    alert(e);
                }

                   var gvecMap = new BeiDlayer({
                        //urlTemplate: "https://stamen-tiles.a.ssl.fastly.net/toner/{z}/{x}/{y}.png",
                        //百度瓦片地图
                        urlTemplate:"http://online1.map.bdimg.com/onlinelabel/?qt=tile&x={x}&y={y}&z={z}",
                        //搞得瓦片地图
                        //  urlTemplate:"http://wprd03.is.autonavi.com/appmaptile?style=7&x={x}&y={y}&z={z}",
                        //    tint: new Color("#004FBB"),
                        //谷歌瓦片地图
                     //    urlTemplate:"http://mt2.google.cn/vt/lyrs=m@167000000&hl=zh-CN&gl=cn&x={x}&y={y}&z={z}&s=Galil",

                        title: "谷歌"
                    });

                vecMap.showMsg(30,20);

              //     var imgMap = new BDImgLayer();
                  //  var anoMap = new BDAnoLayer();


                   // alert(vecMap);

                   // map.addLayer(vecMap);
                 //   var map = new Map({
                    //    spatialReference:new SpatialReference({'wkid': 4326}),

                      //  basemap: {
                       //     baseLayers:[mylayer]
                       // }


                  //  });

                    //map.layer

                    var map = new Map({
                    //    basemap: "topo",
                   //   baseLayers:[vecMap]
                        basemap: {
                            baseLayers:[vecMap,gvecMap]
                        }

                    });


                 // map.addLayer(vecMap);
                    //  map.addLayer(imgMap);
                    //map.addLayer(anoMap);
                   // imgMap.hide();
                    //anoMap.hide();

                    // Create the view set the view padding to be 320 px from the right
                   var view = new MapView({
                       container: "map",
                        map: map,


                    center: [118.0, 39.90],
                    //   center: [-74.045459, 40.690083], // Liberty Island, NY, USA
                       zoom: 16, padding: {
                           right: 320 // Same value as the #sidebar width in CSS
                    }
                   });
                   var basemapLayerList = new BasemapLayerList({view: view
                    });
// Adds the widget below other elements in the top left corner of the view
                   view.ui.add(basemapLayerList, {
                       position: "top-right"
                    });





                    /*
                    */



                });
        }
        catch (e) {
            alert(e);
        }
    </script>
</head>
<body>
<div id="map">
    <div class="base-map">
        <div id="vec" class="base-map-switch base-map-switch-active" onclick="showMap('vec')">地图</div>
        <div id="img" class="base-map-switch base-map-switch-center"  onclick="showMap('img')">影像
            <div id="ano" class="base-map-ano">
                <input id="chkAno" type="checkbox" name="chkAno" value="chkAno" onchange="anoCtrl()"/>标注
            </div>
        </div>
    </div>
</div>
</body>
</html>
